<template>
  <div class="visit-shop">
    <!-- Tab组件 -->
    <van-tabs v-model="active" class="tab-top" sticky>
      <van-tab v-for="item of title" :key="item" :title="item">
        <!-- 下拉刷新组件 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            @load="onLoad"
            :finished-text="list.length != 0?'没有更多了':''"
          >
            <!-- 需要做加载的组件块 -->
            <VisitItem
              :data="item"
              v-for="item of list"
              :key="item.id"
            />
          </van-list>
          <!-- 无数据的时候显示 -->
          <div v-if="(list.length == 0)&&!loading" class="no-data">
            <img src="https://img-agc.iqianggou.com/FibaTekfPIH9_xk5cbb9A6pblh0B" alt="" class="no-data-img"> //缺省图
            <span class="no-data-tips">暂无探店信息～</span>
          </div>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- 底部按钮 -->
    <div class="bottom-btn">
      <div @click="submitVisit" class="btn-item">发布探店</div>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import { Tab, Tabs, PullRefresh, List } from 'vant'
import VisitItem from '@/components/visit-shop-msg-item'
export default {
  data() {
    return {
      list:[],
      active: 0, //tab选中标号
      pageNum: 1,
      refreshing: false, //表示下拉状态
      loading: false, //上拉加载
      finished: false, //是否加载完成
      hasMore: true,
      title: ['全部', '待确认', '探店中', '已完成'], //测试代码
    }
  },
  components: {
    VisitItem,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
  },
  mounted() {
  },
  watch: {
    //切换Tab，重新加载数据
    active: function (val) {
      this.list = []
      // 将加载状态重置为未加载完成
      this.finished = false
      // 重新加载数据
      this.loading = true // 将 loading 设置为 true，表示处于加载状态
      this.pageNum = 1 //刷新，重新加载第一页的数据
      this.onLoad(true)
    },
  },
  methods: {
    //   上拉加载触发事件
    onLoad(val = false) {
      api.activitylist({
        needPagination: 1,
        pageLimit: 6,
        pageNum: this.pageNum,
        explore_status: this.active*2,
      }, res => {
        console.log(res.data)
        this.pageNum += 1 //页数加一
        this.loading = false

        //下拉触发的时候会执行
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        if(val){
          this.list = res.data.list
        }else{
          this.list = [...this.list,...res.data.list]
          console.log(this.loading)
        }
        console.log(this.pageNum>=res.data.total_page,res.data.list.length==0)
        if (this.pageNum>=res.data.total_page||res.data.list.length==0) {
          console.log('none')
          this.finished = true
        }
        console.log(this.loading)
      }, err => {
        this.loading = false
        this.finished = true
        this.refreshing = false
      })
    },
    // 下拉刷新时触发
    onRefresh() {
      // 将加载状态重置为未加载完成
      this.finished = false
      // 重新加载数据
      this.loading = true // 将 loading 设置为 true，表示处于加载状态
      this.pageNum = 1 //刷新，重新加载第一页的数据
      this.onLoad()
    },
    // 发布探店按钮
    submitVisit(){
      console.log('发布探店～')
    },
  },
}
</script>

<style lang="stylus" scoped>
  .visit-shop{
    .van-pull-refresh{
      min-height:100vh;
      margin-bottom: 55px
    }
    // height:100vh;
    /deep/ .van-tabs__line{
      height:4px
      background-color: #FF6D00
    }

    .no-data{
      width: 375px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .no-data-tips{
        margin-top: 30px
        color: #cccccc;
        font-size: 14px;
      }
      .no-data-img{
        margin-top: 100px;
        width: 200px;
      }
    }
  .bottom-btn{
    position: fixed;
    bottom: 0px;
    width: 375px;
    height: 77px;
    padding: 16px 0 0 0;
    background: #FFFFFF;
    .btn-item{
      width: 350px;
      height: 45px;
      margin: 0 auto;
      text-align: center;
      background-image: linear-gradient(to right, #FFAC00 , #FF7400);
      border-radius: 23px;
      color: #FFFFFF;
      font-size: 16px;
      line-height: 45px;
    }
  }
  }
</style>
